<template>
  <div class="dashboard-container">
    <div class="dashboard-text">name: {{ name }} {{ $num }}</div>

    <!-- 使用一下svg图标: SvgIcon组件 iconClass="文件名(不要后缀)" -->
    <!-- html标签的规范: 任何属性名推荐以中划线作为规范 -->
    <SvgIcon icon-class="eye-open" />
    <SvgIcon icon-class="eye" />
    <SvgIcon icon-class="form" />

    <!-- 测试el-cascader 级联选择器 树形选择器 -->
    <!-- <el-cascader v-model="value" separator="-" :options="options" :props="{ label: 'name' }" @change="handleChange" /> -->

    <!-- 测试el-upload 上传任意文件(不仅仅是头像) -->
    <!--
      action 必传   不传会报错     表示将来文件上传到哪个后端服务器
        如果你真的配置了后端服务器接收图片的地址 那么这个组件会帮你去完成上传的所有过程(别操心 你也不用管了 我帮你上传)
        我们不打算啥也不管 我们要自己完成所有上传的过程

      show-file-list	           表示是否显示已上传文件列表
      before-upload              表示上传之前的函数, 用于校验(不是随便一个文件就给你上传)
                                  可以利用这个函数限制用户上传的文件的类型   或者文件体积(大小)
                                                                    最小单位       b            字节
                                                                    单位          kb          1kb=1024b
                                                                    单位          M           1M=1024KB=1024*1024b

                                                                    1024 程序员节
     -->
    <!-- <el-upload
      class="avatar-uploader"
      action=""
      :show-file-list="false"
      :before-upload="beforeAvatarUpload"
    >
      <img v-if="imageUrl" :src="imageUrl" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon" />
    </el-upload> -->

    <!-- 测试多选框组 -->
    <el-checkbox-group v-model="list">
      <!-- 这边特别特殊! 多选框的value是由label属性提供的!!! -->
      <el-checkbox :label="1">抽烟</el-checkbox>
      <el-checkbox :label="2">喝酒</el-checkbox>
      <el-checkbox :label="3">烫头</el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Dashboard',
  data() {
    return {
      value: [], // 是个数组 记录每一层的数据信息
      options: [
        {
          value: 'zhinan222', // 控制提交给 value 的字段
          name: '指南222', // 控制文字信息的
          // 控制孩子们
          children: [
            {
              value: 'shejiyuanze',
              name: '设计原则',
              children: [
                {
                  value: 'yizhi',
                  name: '一致',
                  children: [
                    {
                      name: '哈哈哈',
                      value: 'HAHAHAH'
                    }
                  ]
                },
                {
                  value: 'fankui',
                  name: '反馈'
                },
                {
                  value: 'xiaolv',
                  name: '效率'
                },
                {
                  value: 'kekong',
                  name: '可控'
                }
              ]
            },
            {
              value: 'daohang',
              name: '导航',
              children: [
                {
                  value: 'cexiangdaohang',
                  name: '侧向导航'
                },
                {
                  value: 'dingbudaohang',
                  name: '顶部导航'
                }
              ]
            }
          ]
        },
        {
          value: 'zujian',
          name: '组件',
          children: [
            {
              value: 'basic',
              name: 'Basic',
              children: [
                {
                  value: 'layout',
                  name: 'Layout 布局'
                },
                {
                  value: 'color',
                  name: 'Color 色彩'
                },
                {
                  value: 'typography',
                  name: 'Typography 字体'
                },
                {
                  value: 'icon',
                  name: 'Icon 图标'
                },
                {
                  value: 'button',
                  name: 'Button 按钮'
                }
              ]
            },
            {
              value: 'form',
              name: 'Form',
              children: [
                {
                  value: 'radio',
                  name: 'Radio 单选框'
                },
                {
                  value: 'checkbox',
                  name: 'Checkbox 多选框'
                },
                {
                  value: 'input',
                  name: 'Input 输入框'
                },
                {
                  value: 'input-number',
                  name: 'InputNumber 计数器'
                },
                {
                  value: 'select',
                  name: 'Select 选择器'
                },
                {
                  value: 'cascader',
                  name: 'Cascader 级联选择器'
                },
                {
                  value: 'switch',
                  name: 'Switch 开关'
                },
                {
                  value: 'slider',
                  name: 'Slider 滑块'
                },
                {
                  value: 'time-picker',
                  name: 'TimePicker 时间选择器'
                },
                {
                  value: 'date-picker',
                  name: 'DatePicker 日期选择器'
                },
                {
                  value: 'datetime-picker',
                  name: 'DateTimePicker 日期时间选择器'
                },
                {
                  value: 'upload',
                  name: 'Upload 上传'
                },
                {
                  value: 'rate',
                  name: 'Rate 评分'
                },
                {
                  value: 'form',
                  name: 'Form 表单'
                }
              ]
            },
            {
              value: 'data',
              name: 'Data',
              children: [
                {
                  value: 'table',
                  name: 'Table 表格'
                },
                {
                  value: 'tag',
                  name: 'Tag 标签'
                },
                {
                  value: 'progress',
                  name: 'Progress 进度条'
                },
                {
                  value: 'tree',
                  name: 'Tree 树形控件'
                },
                {
                  value: 'pagination',
                  name: 'Pagination 分页'
                },
                {
                  value: 'badge',
                  name: 'Badge 标记'
                }
              ]
            },
            {
              value: 'notice',
              name: 'Notice',
              children: [
                {
                  value: 'alert',
                  name: 'Alert 警告'
                },
                {
                  value: 'loading',
                  name: 'Loading 加载'
                },
                {
                  value: 'message',
                  name: 'Message 消息提示'
                },
                {
                  value: 'message-box',
                  name: 'MessageBox 弹框'
                },
                {
                  value: 'notification',
                  name: 'Notification 通知'
                }
              ]
            },
            {
              value: 'navigation',
              name: 'Navigation',
              children: [
                {
                  value: 'menu',
                  name: 'NavMenu 导航菜单'
                },
                {
                  value: 'tabs',
                  name: 'Tabs 标签页'
                },
                {
                  value: 'breadcrumb',
                  name: 'Breadcrumb 面包屑'
                },
                {
                  value: 'dropdown',
                  name: 'Dropdown 下拉菜单'
                },
                {
                  value: 'steps',
                  name: 'Steps 步骤条'
                }
              ]
            },
            {
              value: 'others',
              name: 'Others',
              children: [
                {
                  value: 'dialog',
                  name: 'Dialog 对话框'
                },
                {
                  value: 'tooltip',
                  name: 'Tooltip 文字提示'
                },
                {
                  value: 'popover',
                  name: 'Popover 弹出框'
                },
                {
                  value: 'card',
                  name: 'Card 卡片'
                },
                {
                  value: 'carousel',
                  name: 'Carousel 走马灯'
                },
                {
                  value: 'collapse',
                  name: 'Collapse 折叠面板'
                }
              ]
            }
          ]
        },
        {
          value: 'ziyuan',
          name: '资源',
          children: [
            {
              value: 'axure',
              name: 'Axure Components'
            },
            {
              value: 'sketch',
              name: 'Sketch Templates'
            },
            {
              value: 'jiaohu',
              name: '组件交互文档'
            }
          ]
        }
      ],
      imageUrl: '',
      list: [2, 3]
    }
  },
  computed: {
    ...mapGetters(['name'])
  },
  methods: {
    handleChange(value) {
      console.log(value) // [] 记录每一层的数据信息
    },

    beforeAvatarUpload(file) {
      // 真正上传之前会执行这个函数  且有个参数 => 那个上传的文件
      // file.type 文件类型  'image/jpeg' ,   'image/png' ,  'image/gif' ,  'image/bmp'
      // file.size 文件体积
      const TYPE_LIST = ['image/jpeg', 'image/png', 'image/gif', 'image/bmp']
      const flag = TYPE_LIST.includes(file.type) // true  false

      const flag2 = file.size / 1024 / 1024 < 5 // true  false

      if (!flag) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
        return false
      }

      if (!flag2) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
        return false
      }

      return true
      // 上传之前的函数(用于校验)  有个要求  必须返回布尔值
      //                返回true  表示校验成功    继续执行文件上传
      //                返回false  表示校验失败    不会继续执行文件上传
    }
  }
}
</script>

<style lang="scss">
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
